<template>
  <div>
    <searchBar placeHolder="请输入姓名" @handleSearch="init"/>
    <el-table :data="tableData">
      <el-table-column align="center"
                       prop="name"
                       label="姓名">
      </el-table-column>
      <el-table-column align="center"
                       prop="age"
                       label="年龄">
      </el-table-column>
      <el-table-column align="center"
                       prop="marriage"
                       label="婚否">
      </el-table-column>
      <el-table-column align="center"
                       prop="politics"
                       label="政治面貌">
      </el-table-column>
      <el-table-column align="center"
                       prop="career"
                       label="职业">
      </el-table-column>
      <el-table-column align="center"
                       prop="arms"
                       label="服役单位">
      </el-table-column>
      <el-table-column align="center"
                       prop="start_time"
                       label="入伍时间">
      </el-table-column>
      <el-table-column align="center"
                       prop="end_time"
                       label="转业时间">
      </el-table-column>
      <el-table-column align="center"
                       label="地址">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="详细地址"
                      width="300"
                      trigger="hover"
                      :content="`${scope.row.province}${scope.row.city}${scope.row.county}${scope.row.address}`">
            <el-button slot="reference"
                       type="text"
                       class="ellipsis">{{`${scope.row.province}${scope.row.city}${scope.row.county}${scope.row.address}`}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-popover placement="bottom"
                      width="200"
                      v-model="popover.RejectVisible[scope.$index]"
                      trigger="click">
            <el-button slot="reference"
                       type="danger"
                       :loading="RejectLoading[scope.$index]"
                       size="small">驳回</el-button>
            <div style="text-align:right">
              <el-input type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        placeholder="请输入驳回理由"
                        v-model="reason[scope.$index]">
              </el-input>
              <el-button type="primary"
                         size="mini"
                         @click="Reject(scope.row.id,scope.$index)"
                         style="margin-top:10px">确定</el-button>
            </div>
          </el-popover>
          <el-popover placement="top"
                      width="160"
                      v-model="popover.adoptVisible[scope.$index]">
            <p>您确定要通过吗?是否继续?</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini"
                         type="text"
                         @click="$set(popover.adoptVisible, scope.$index, false)">取消</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="adopt(scope.row.id,scope.$index)">确定</el-button>
            </div>
            <el-button type="primary"
                       slot="reference"
                       :loading="adoptLoading[scope.$index]"
                       size="small">通过</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init(this.search)' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      adoptLoading: [], //通过loading
      RejectLoading: [], //驳回通过loading
      popover: {
        RejectVisible: [],
        adoptVisible: []
      },
      reason: [], //驳回理由
      search: null
    }
  },
  methods: {
    async init (data) {
      this.search = data
      try {
        const res = await this.api.auditlist(Object.assign({}, data, { page: this.page }))
        this.tableData = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    },
    async adopt (id, index) {  //通过
      try {
        this.adoptLoading[index] =  true
        const res = await this.api.auditPass({ id: id })
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.$set(this.popover.adoptVisible, index, false)
          this.init()
        } else {
          this.$message.error(res.msg)
        }
        this.adoptLoading[index] = false
      } catch (error) {
        this.adoptLoading[index] = false
        this.$message('接口错误,请联系管理员')
      }
    },
    async Reject (id, index) {  //驳回操作

      if (!this.reason[index]) {  //必须输入驳回理由
        this.$message.error('请输入驳回理由')
        return;
      }
      try {
        this.$set(this.RejectLoading, index, true)
        const res = await this.api.auditReject({ id: id, reason: this.reason[index] })
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.$set(this.popover.RejectVisible, index, false)
          this.init()
        } else {
          this.$message.error(res.msg)
        }
        this.RejectLoading[index] = false
      } catch (err) {
        this.$set(this.RejectLoading, index, false)
        this.$message('接口错误,请联系管理员')
      }
    },

  },
  mounted () {
    this.init()
  }
}
</script>

<style>
</style>
